<template>
  <div class="chart-wrapper" :style="{ height: height + 'px' }">
    <div class="slot first_solt" v-if="title">
      <div class="plate-header plate-header-bus">
        <span class="title">{{ title }}</span>
      </div>
    </div>
    <div class="slot">
      <div class="chart" :id="id" :style="{ height: height + 'px' }"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import { calculateColorBrightness } from "@/lib/extension";
const ratio = JSON.parse(localStorage.ratio);

export default {
  name: "",
  data() {
    return {
      option: null,
      chartObj: null,
      useDualTheme: true,
      theme: "night",
      ratio: ratio
    };
  },
  props: {
    id: {
      type: String,
      default: ""
    },
    chartData: {
      type: Object,
      required: true
    },
    yAxisName: {
      type: String
    },
    chartColors: {
      type: Array,
      default: () => new Array("rgb(236, 218, 152)", "#22A857")
    },
    legendOrient: {
      type: String,
      default: "horizontal"
    },
    title: {
      type: String
    },
    height: Number
  },
  watch: {
    chartData: {
      handler(n) {
        this.updateChart();
      },
      deep: true,
      immediate: true
    },
    id: {
      handler(n) {
        this.updateChart();
      },
      immediate: true
    },
    chartData: {
      handler(n) {
        this.updateChart();
      },
      immediate: true
    },
    yAxisName: {
      handler(n) {
        this.updateChart();
      },
      immediate: true
    },
    // color:['#00a2e8','#22b14c'],
    chartColors: {
      handler(n) {
        this.updateChart();
      },
      immediate: true
    },
    height: {
      handler(n) {
        this.updateChart();
      },
      immediate: true
    }
  },
  methods: {
    updateChart() {
      this.determineTheme();
      this.$nextTick(() => {
        if (this.chartObj) {
          this.chartObj.setOption(this.option);
        } else {
          this.renderChart();
        }
      });
    },
    renderChart() {
      let keys = Object.keys(this.chartData);
      let nodes = Object.values(this.chartData);
      this.option = {
        grid: {
          top: 50 * ratio,
          left: 0,
          right: 0,
          bottom: 5,
          containLabel: true
        },
        title: {
          //   backgroundColor:"#22a857"
        },
        legend: {
          show: true,
          //   x: "right",
          x: this.legendOrient === "vertical" ? "top" : 40 * this.ratio,
          top: this.legendOrient === "vertical" ? "top" : 15 * this.ratio,
          orient: this.legendOrient,
          data: keys,
          textStyle: {
            color: this.theme === "night" ? "#ffffff" : "#333",
            fontSize: 12 * ratio,
            lineHeight: 12 * ratio,
            fontFamily: "ali-m"
          },
          data: [
            {
              name: "运营公交车(辆)",
              icon: "circle",
              textStyle: { color: "#fff", fontSize: "30" }
            },
            {
              name: "站点人数(人)",
              icon: "circle",
              textStyle: { color: "#fff", fontSize: "30" }
            }
          ]
        },
        xAxis: {
          type: "category",
          data: nodes[0].map(o => o.name),
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            fontSize: 12 * ratio,
            color: this.theme === "day" ? "#333" : "#fff"
          }
        },
        yAxis: [
          {
            name: this.yAxisName,
            type: "value",
            axisLine: { show: false },
            axisTick: {
              show: true,
              lineStyle: {
                color: this.theme === "day" ? "#333" : "#fff"
              }
            },
            axisLabel: {
              fontSize: 12 * ratio,
              color: this.theme === "day" ? "#333" : "#fff"
            },
            splitLine: { show: false }
          }
        ],
        series: nodes.map((o, i) => {
          return {
            type: "line",
            name: keys[i],
            data: o,
            showAllSymbol: true,
            smooth: "false",
            symbolSize: 20,
            boundaryGap: false,
            itemStyle: {
              color: "#00000000",
              borderWidth: 0,
              normal: {
                color: this.chartColors[i],
                lineStyle: {
                  width: 2.5 * ratio,
                  color: this.chartColors[i]
                }
              }
            },
            areaStyle: {
              opacity: 0.33,
              color: this.chartColors[i]
            },
            label: {
              show: false
            }
          };
        }),
        // tooltip: {
        // //   trigger: item, //改为item触发
        //   formatter: params => {
        //     //可以在此设置每一条数据的hover提示信息，根据params.data中的数据自己判断，然后返回不同的值
        //     // return item.value;
        //   }
        // }

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            axis: "x"
          },
          padding: [10, 10],
          extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)"
        }
      };
      let chartWrapper = document.getElementById(this.id);
      this.chartObj = echarts.init(chartWrapper, null, {
        renderer: "svg"
      });
      this.chartObj.setOption(this.option);
      this.chartObj.resize();
      window.onresize = () => {
        this.chartObj.resize();
      };
    },
    determineTheme() {}
  }
};
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
}
</style>